<template>
	<view class="article-list">
		<uni-nav-bar rightIcon="list" title="博客" @clickRight="showCategoryDrawer"></uni-nav-bar>
		<uni-drawer ref="categoryDrawer" mode="right" :mask-click="true" :width="130">
			<scroll-view style="height: 100%;" scroll-y="true">
				<uni-list>
					<uni-list-item clickable key="all" title="全部" @click="changeCategory()"></uni-list-item>
					<uni-list-item v-for="item in categories" clickable :key="item.categoryId"
						:title="item.categoryName" @click="changeCategory(item.categoryId)">
					</uni-list-item>
				</uni-list>
			</scroll-view>
		</uni-drawer>

		<swiper class="swiper" indicator-dots circular autoplay>
			<swiper-item>
				<image
					src="https://edu-image.nosdn.127.net/307e3bbd-0b8f-4166-a8ad-a694476020e8.png?imageView&quality=100&thumbnail=690y272" />
			</swiper-item>
			<swiper-item>
				<image
					src="https://edu-image.nosdn.127.net/d078fac6-cb60-4e6b-a57e-cdc0c4c4b594.png?imageView&quality=100&thumbnail=690y272" />
			</swiper-item>
			<swiper-item>
				<image
					src="https://edu-image.nosdn.127.net/39ec1de8-39b8-4476-ab06-264d6d675175.png?imageView&quality=100&thumbnail=690y272" />
			</swiper-item>
		</swiper>
		<view class="article">
			<view class="item" v-for="article in articles" :key="article.articleId">
				<view class="article-title" @click="gotoDetail(article.articleId)">{{ article.articleTitle }}</view>
				<view class="others">
					<text>{{ article.categoryName }}</text>
					<text>{{ article.createTime }}</text>
					<text>12</text>
				</view>
			</view>
		</view>
		<view class="isOver" v-if="isOverFlag">牛啊牛啊，竟然看完了，感谢支持！</view>
	</view>
</template>

<script>
	import UniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'

	export default {
		components: {
			UniNavBar
		},
		data() {
			return {
				categories: [],
				articles: [],
				pageData: {
					page: 1,
					pageSize: 10,
					total: 0
				},
				isOverFlag: false,
				curCategoryId: ''
			};
		},
		methods: {
			showCategoryDrawer() {
				this.$refs.categoryDrawer.open()
			},
			gotoDetail(articleId) {
				uni.navigateTo({
					url: '/pages/article-detail/article-detail?id=' + articleId
				})
			},
			initPageData() {
				this.pageData = {
					page: 1,
					pageSize: 10,
					total: 0
				}
			},
			changeCategory(categoryId) {
				this.initPageData()
				this.isOverFlag = false
				this.articles = []
				
				this.curCategoryId = categoryId ? categoryId : ''
				this.getArticles()
				this.$refs.categoryDrawer.close()
			},
			async getArticles(callBack) {
				let url = this.curCategoryId ? '/blog/category/' + this.curCategoryId + '/article/list' 
									: '/blog/article/list'
				url += '?page=' + this.pageData.page + '&pageSize=' + this.pageData.pageSize
				const res = await this.$myRequest({ url })
				this.articles = [...this.articles, ...res.data]
				this.pageData.page = res.pageData.page
				this.pageData.pageSize = res.pageData.pageSize
				this.pageData.total = res.pageData.total
				
				callBack && callBack()
			},
			async getCategories() {
				const res = await this.$myRequest({ url: '/blog/category/list' })
				this.categories = res.data
			}
		},
		onLoad() {
			this.getArticles()
			this.getCategories()
		},
		onReachBottom() {
			console.log(this.articles.length, this.pageData.total)
			if (this.articles.length == this.pageData.total) {
				return this.isOverFlag = true
			}
			this.pageData.page ++
			this.getArticles()
		},
		onPullDownRefresh() {
			this.initPageData()
			this.articles = []
			this.isOverFlag = false
			setTimeout(()=>{
				this.getArticles(() => {
					uni.stopPullDownRefresh()
				})
			},1000)
		}
	}
</script>

<style scoped lang="scss">
	.article-list {
		width: 750rpx;

		.swiper {
			image {
				width: 750rpx;
				height: 300rpx;
			}
		}

		.article {
			.item {
				padding: 30rpx;
				border-bottom: 1px solid #D8D8D8;

				.article-title {
					font-size: 36rpx;
					font-weight: bold;
				}

				.others {
					font-size: 26rpx;
					color: #999;
					margin-top: 20rpx;

					text {
						margin-right: 30rpx;
						;
					}
				}
			}
		}
	
		.isOver {
			width: 100%;
			height: 50px;
			line-height: 50px;
			text-align: center;
			// background: #fff;
			font-size: 28rpx;
		}
	}
</style>
